<template>
    <view class="gift">
        <view class="load" v-if="!load">
            <u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
        </view>
        <block v-else>
            <block v-if="orderList.length > 0">
                <view class="userListBox">
                    <view class="itemBox" v-for="(item, index) in orderList" :key="index">
                        <view class="single">
                            <view class="border">
                                <view class="single_right">
                                    <view class="single_title">
                                        <view class="single_title_text">
                                            {{ item.UserName || '--' }}
                                        </view>
                                        <view class="single_title_state" :class="statData[item.RoleID]">{{
                                            item.RoleID == 2?'管理人员':item.RoleID ==3?'运营人员':'未知' }}</view>
                                    </view>
                                    <view class="single_body">
                                        <view class="single_cell" @click="telFun(item.Phone)">
                                            联系电话：
                                            <text style="color: #719bfa">{{ item.Phone || '--' }}</text>
                                        </view>

                                    </view>

                                </view>
                            </view>
                            <!-- <view class="time">申请时间：{{ $util.formatDateTime(item.CreateTime) }}</view> -->

                            <view class="orderBtnBox">
                                <view class="obBox">
                                    <view class="errbtn" @click="delAdmin(item)">删除</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>

            </block>
            <block v-else>
                <EmptyBox text="暂无数据"></EmptyBox>
            </block>
            <view class="addBox" @click="confirmPay()">新增账号</view>

            <BtmLogo></BtmLogo>
        </block>

        <uni-popup ref="PopupPay" type="center">
            <view class="popup_body">
                <view class="popup_title">
                    新增账号
                    <view class="popup_icon" @click="closePayCenter()">
                        <uni-icons type="closeempty" size="18" color="#242424"></uni-icons>
                    </view>
                </view>
                <view class="popup_inp">
                    <input type="number" v-model="userAcc" placeholder="请输入账号姓名" />
                </view>
                <view class="popup_inp">
                    <input type="number" v-model="userPhone" placeholder="请输入账号手机号" />
                </view>
                <view class="chooseAdmin">
                    <view @click="chooseStatus('2')" :class="adminStatus==2?'active':''">管理员</view>
                    <view @click="chooseStatus('3')" :class="adminStatus==3?'active':''">运营人员</view>
                </view>

                <view class="popup_btn" @click="payCenterFun()">确定</view>
            </view>
        </uni-popup>
    </view>
</template>

<script>

export default {
    data() {
        return {
            load: false, //是否加载
            orderList: [], //商品列表
            searchValue: '',
            statData: {
                2: 'single_title_warm',
                3: 'single_title_green',
            },
            userAcc: '',
            userPhone: '',
            adminStatus:2
        };
    },

    computed: {},
    watch: {},

    onReady() { },

    async onLoad(e) {
        this.getApplyList();
    },
    onUnload() {
        
    },
    methods: {
        telFun(tel) {
            uni.makePhoneCall({
                phoneNumber: tel.toString(),
                success() {
                    console.log('拨号成功');
                },
                fail(err) {
                    console.error('拨号失败:', err);
                },
            });
        },
        async getApplyList() {
            let res = await this.$api.post('/ManageShop/MyUser');
            if (res.code == 0) {
                this.orderList = res.data;
                this.load = true;
            }
        },
        confirmPay() {
            this.$refs.PopupPay.open();
        },
        closePayCenter() {
            this.userAcc = ''
            this.userPhone = ''
            this.adminStatus = 2
            this.$refs.PopupPay.close();
        },
        async payCenterFun() {
            if (!this.userAcc) {
                this.$pv.msg('请输入账号昵称')
                return
            }
            if (!this.userPhone) {
                this.$pv.msg('请输入手机号码')
                return

            }
            let res = await this.$api.post('/ManageShop/AddUser', {
                RoleID: this.adminStatus,
                UserName: this.userAcc,
                Phone: this.userPhone, 
            })
            if (res.code == 0) {
                this.$pv.msg('新增成功')
                this.getApplyList();
            } else {
                this.$pv.msg(res.message)
            }
            this.closePayCenter()
        },
        chooseStatus(e)  { 
            this.adminStatus = Number(e)
        },
        delAdmin(e){
            uni.showModal({
                title: '提示',
                content: '是否确认删除？',
                success: (rex) => {
                    if (rex.confirm) {
                        this.delAdminFun(e)
                    }
                },
            });
        },
        async delAdminFun(e){
            let res = await this.$api.post('/ManageShop/DeleteUser', {
                ID: e.ID
            })
            if (res.code == 0) {
                this.$pv.msg('删除成功')
                this.getApplyList();
            } else {
                this.$pv.msg(res.message)
            }
        }
    },
};
</script>

<style lang="scss">
page {
    // height: 100%;
    background: #f6f6f6;
}

.gift {
    display: flex;
    flex-direction: column;
    align-items: center;
    // padding-top: 100rpx;
    padding-bottom: 80rpx;
    .userListBox{
        width: 100%;
        padding: 60rpx 0;
    }
    .itemBox {
        // margin: 30rpx 0;
        background: #fff;
        border-radius: 16rpx;
        margin-bottom: 18rpx;

        .orderNoBox {
            padding: 20rpx;
            color: #333333;
            font-size: 30rpx;
            padding-bottom: 20rpx;
            display: flex;
            align-items: center;

            image {
                display: block;
                width: 34rpx;
                margin-left: 10rpx;
            }
        }

        .single {
            width: 100%;
            // height: 252rpx;
            padding: 20rpx;
            margin-bottom: 20rpx;
            background: #fff;
            border-radius: 16rpx;
            overflow: hidden;

            .time {
                color: #999;
                font-size: 26rpx;
                // padding-bottom: 20rpx;
                margin-left: 10rpx;
            }

            .border {
                display: flex;
                align-items: center;
                // border-bottom: 1rpx solid #E4E4E4;

                .single_img {
                    width: 204rpx;
                    height: 204rpx;
                    margin-right: 10rpx;
                    border-radius: 8rpx;
                    overflow: hidden;

                    image {
                        width: 100%;
                        height: 100%;
                    }
                }

                .single_right {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    flex: 1;
                    margin-left: 10rpx;
                    /* margin: 0 5rpx 0 10rpx; */
                    min-height: 120rpx;

                    .single_title {
                        width: 100%;
                        display: flex;
                        // align-items: center;
                        justify-content: space-between;

                        .single_title_text {
                            width: 340rpx;
                            font-weight: bold;
                            font-size: 28rpx;
                            color: #333333;
                            display: -webkit-box;
                            /*弹性伸缩盒子模型显示*/
                            -webkit-box-orient: vertical;
                            /*排列方式*/
                            -webkit-line-clamp: 2;
                            /*显示文本行数(这里控制多少行隐藏)*/
                            overflow: hidden;
                            /*溢出隐藏*/
                        }

                        .single_title_state {
                            // flex: 1;
                            font-weight: 500;
                            font-size: 28rpx;
                            color: #5d8bf8;
                        }

                        .single_title_err {
                            color: #fc394b;
                        }

                        .single_title_warm {
                            color: #f3ca56;
                        }

                        .single_title_green {
                            color: #0bce68;
                        }
                    }

                    .single_body {
                        margin-top: 24rpx;

                        .single_cell {
                            margin-bottom: 8rpx;
                            font-size: 28rpx;
                            color: #333333;

                            text {
                                font-size: 28rpx;
                                color: #333333;
                            }
                        }

                        .single_err {
                            font-size: 28rpx;
                            color: #fc3d49;

                            text {
                                font-size: 28rpx;
                                color: #fc3d49;
                            }
                        }
                    }

                   
                }
            }

            .border:last-child {
                border-bottom: none;
            }

            .orderBtnBox {
                width: 100%;

                .obBox {
                    width: 100%;
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;

                  

                    .bluebtn {
                        margin-top: 12rpx;
                        padding: 12rpx 24rpx;
                        border-radius: 14rpx;
                        color: white;
                        font-weight: bold;
                        font-size: 22rpx;
                        background: #5d8bf8;
                    }

                    .greenbtn {
                        margin-top: 12rpx;
                        padding: 12rpx 24rpx;
                        border-radius: 14rpx;
                        color: white;
                        font-weight: bold;
                        font-size: 22rpx;
                        background: #0bce68;
                    }

                    .errbtn {
                        margin-top: 12rpx;
                        padding: 12rpx 24rpx;
                        border-radius: 14rpx;
                        color: white;
                        font-weight: bold;
                        font-size: 22rpx;
                        margin-right: 16rpx;
                        background: #fc394b;
                    }
                }
            }
        }
    }
}



.popup_body {
    width: 80vw;
    border-radius: 16rpx;
    background-color: #f6f6f6;
    box-sizing: border-box;
    padding: 34rpx 32rpx;
    position: relative;

    .popup_title {
        font-size: 30rpx;
        font-weight: bold;
        text-align: center;
        color: #111;
        margin-bottom: 14rpx;

        .popup_icon {
            position: absolute;
            top: 0;
            right: 0;
            padding: 12rpx;
        }
    }

    .popup_main {
        .popup_cell {
            border-radius: 16rpx;
            background: linear-gradient(134deg, #fef9ef 0%, #fff4e3 100%);
            border: 4rpx solid #ffe4c3;
            padding: 20rpx;
            margin-bottom: 20rpx;

            .shop_title {
                font-size: 28rpx;
                color: #111;
                font-weight: bold;
                margin-bottom: 6rpx;
            }

            .shop_info {
                font-size: 26rpx;
                color: #c2875b;
            }

            .shop_price {
                color: #ff4d0d;
                font-size: 32rpx;
                margin-top: 12rpx;
            }
        }

        .popup_active {
            background: linear-gradient(134deg, #fff6f6 0%, #ffe7e7 100%);
            border: 4rpx solid #ff7f7e;
        }
    }

    .popup_inp {
        margin-bottom: 20rpx;
        input {
            border: 2rpx solid #999;
            border-radius: 12rpx;
            height: 60rpx;
            line-height: 60rpx;
            padding: 8rpx 12rpx;
        }
    }
    .chooseAdmin{
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        >view{
            width: 30%;
            border: 2rpx solid #5d8bf8;
            color: #5d8bf8;
            text-align: center;
            padding: 12rpx 0;
            border-radius: 16rpx;
            font-size: 26rpx;
        }
        >.active{
            background-color: #5d8bf8;
            border: 2rpx solid #5d8bf8;
            color: #fff;
        }
    }

    .popup_btn {
        background-color: #5d8bf8;
        border-radius: 16rpx;
        font-size: 30rpx;
        color: #fff;
        width: 250rpx;
        height: 70rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 32rpx auto 0;
    }
}
.addBox{
    position: fixed;
    bottom: 60rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    text-align: center;
    background-color: #5d8bf8;
    border-radius: 16rpx;
    font-size: 30rpx;
    color: #fff;
    padding: 20rpx 0;
}
</style>
